<template>
  <div class="hello">
    <header>
      <div class="left">
        <img src="../assets/img/lt-tou.png">
        <ul>
          <li>Nj柚子(荔湾Radio)</li>
          <li>FK1604569</li>
          <li>在线54人累计5000的人</li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>订阅</li>
          <li><img src="../assets/img/zf.png"></li>
          <li><img src="../assets/img/dianyuan.png"></li>
        </ul>
      </div>
    </header>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
  background: #004a63;
  .px2rem(height, 100);
  .padding-left(20);
  .padding-right(20);
  .padding-top(20);
  .webkit();
  align-items: center;
  justify-content: space-between;
  .left{
    .webkit();
    img{
     .px2rem(height, 70);
     .px2rem(width, 70); 
    }
    ul{
      .padding-left(10);
      li:nth-child(1){
          .font(22,#fff);
      };
      li{
        .font(18, #9aabb3);
      }
    }
  }
  .right{
    ul{
      .padding-right(20);
      .webkit();
      li{
        .font(26,#fff);
      }
      li:nth-child(2){
        img{
          .px2rem(height, 32);
          .px2rem(width, 32); 
          .padding-left(30); 
        }
      };
      li:nth-child(3){
        img{
          .px2rem(height, 32);
          .px2rem(width, 32);
          .padding-left(30); 
        }
      };
    }
  }

}

 

</style>
